import MusicCard from "@/pages/alingcenter/List/MUSIC/components/MusicCard"
import { getAllMusic } from "@/services"
import { Box, Stack, Tab, Tabs } from "@mui/material"
import { useRequest } from "ahooks"
import { Spin } from "antd"
import { Loading } from "antd-mobile"
import React from "react"
import MUSIC from "./MUSIC"
import Memory from "./Memory"
interface TabPanelProps {
  children?: React.ReactNode
  dir?: string
  index: number
  value: number
  loading?: boolean
}
export function TabPanel(props: TabPanelProps) {
  const { children, loading = false, value, index, ...other } = props

  return (
    <div
      style={{
        flexGrow: 1,
        backgroundColor: "#ededed82",
        overflow: "auto",
        paddingBottom: 16,
      }}
      role="tabpanel"
      hidden={value !== index}
      id={`full-width-tabpanel-${index}`}
      aria-labelledby={`full-width-tab-${index}`}
      {...other}
    >
      {children}
    </div>
  )
}
export default () => {
  const [value, setValue] = React.useState(1)

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue)
  }

  return (
    <>
      <Box
        sx={{
          flexGrow: 1,
          //maxWidth: { xs: 320, sm: 480 },
          width: "100%",
          display: "flex",
          flexDirection: "column",
          height: "100%",
          bgcolor: "background.paper",
        }}
      >
        <Tabs value={value} onChange={handleChange} centered>
          <Tab label="图文" value={1} />
          <Tab label="音乐" value={2} />
          <Tab label="视频" value={3} />
        </Tabs>
        <TabPanel value={value} index={2}>
          <MUSIC></MUSIC>
        </TabPanel>
        <TabPanel value={value} index={1}>
          <Memory></Memory>
        </TabPanel>
        <TabPanel value={value} index={3}>
          developing
        </TabPanel>
      </Box>
    </>
  )
}
